import 'package:flutter/material.dart';
import 'package:flutter_eve_plugin/constants/font_family.dart';
import 'package:flutter_eve_plugin/constants/font_weight.dart';
import 'package:flutter_eve_plugin/constants/hero_tag.dart';
import 'package:flutter_eve_plugin/model/ye_xiu/checkpoint/user_card.dart';
import 'package:flutter_eve_plugin/store/main.dart';
import 'package:flutter_eve_plugin/store_vm/app_vm.dart';
import 'package:flutter_eve_plugin/utils/image_util.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';
import 'package:flutter_redux/flutter_redux.dart';

class CheckpointStartGameCenterWidget extends StatefulWidget {
  final List<CardList> showList;
  CheckpointStartGameCenterWidget({Key key, this.showList}) : super(key: key);

  _CheckpointStartGameCenterWidgetState createState() =>
      _CheckpointStartGameCenterWidgetState();
}

class _CheckpointStartGameCenterWidgetState
    extends State<CheckpointStartGameCenterWidget> {
  List<Widget> createItem(int len, List<CardList> showList) {
    return List<Widget>.generate(len, (index) {
      var item = showList[index];
      return Container(
        width: setRatio(67),
        height: setRatio(220),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.transparent),
          borderRadius: BorderRadius.circular(setRatio(5)),
          gradient: LinearGradient(
            colors: [
              Color(0x6F000000),
              Color(0x4f000000),
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
        ),
        child: Stack(
          children: <Widget>[
            Container(
              width: setRatio(67),
              height: setRatio(220),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(setRatio(5)),
                  image: DecorationImage(
                      fit: BoxFit.cover,
                      image: NetworkImage(item?.card?.picUrlBig ?? ''))),
            ),
            Positioned(
              top: 0,
              left: 0,
              child: Image.asset(
                qualityCharImg(item),
                width: setRatio(30),
                height: setRatio(30),
              ),
            ),
            Positioned(
              bottom: setRatio(23),
              left: 0,
              right: 0,
              child: Text.rich(
                TextSpan(
                    style: TextStyle(
                        decoration: TextDecoration.none,
                        color: Color(0xFFFFFFFF),
                        fontFamily: FontFamily.PMZD,
                        fontSize: setTextSp(9)),
                    children: [
                      TextSpan(text: 'Lv.'),
                      TextSpan(
                          text: '${item?.cardLevel?.level ?? 0}',
                          style: TextStyle(fontSize: setTextSp(11))),
                    ]),
                textAlign: TextAlign.center,
              ),
            ),
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: Container(
                height: setRatio(17),
                decoration: BoxDecoration(
                    color: Color(0x4F000000),
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(setRatio(5)),
                        bottomRight: Radius.circular(setRatio(5)))),
                child: Center(
                  child: Text.rich(
                    TextSpan(
                        style: TextStyle(
                          decoration: TextDecoration.none,
                          color: Color(0xFFFFFFFF),
                          fontFamily: FontFamily.PINGFANG,
                          fontWeight: FontWeightCustom.PF_Medium,
                          fontSize: setTextSp(10),
                        ),
                        children: [
                          TextSpan(text: '战斗力'),
                          TextSpan(
                              text: '${item?.fightingCapacity ?? 0}',
                              style: TextStyle(color: Color(0xFFFFBF13))),
                        ]),
                  ),
                ),
              ),
            )
          ],
        ),
      );
    }).toList();
  }

  String qualityCharImg(CardList info) {
    switch (info?.card?.quality ?? 0) {
      case 5:
        return imageUtilYeXiu('checkpoint/icon_level_s@3x');
      case 4:
        return imageUtilYeXiu('checkpoint/icon_level_a@3x');
      case 3:
        return imageUtilYeXiu('checkpoint/icon_level_b@3x');
      case 2:
        return imageUtilYeXiu('checkpoint/icon_level_c@3x');
      case 1:
        return imageUtilYeXiu('checkpoint/icon_level_d@3x');
      default:
        return imageUtilYeXiu('checkpoint/icon_level_s@3x');
    }
  }

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(converter: (store) {
      return AppStateViewModel(state: store.state);
    }, builder: (context, vm) {
      var list = widget.showList;

      ///增加第一个卡牌为君莫笑
      var userCard = vm.state.yeXiuState.checkpointState.userCard;
      userCard?.cards?.forEach((child) {
        if (child?.card?.name == '君莫笑') {
          list.insert(0, child);
        }
      });
      return Container(
        width: setRatio(375),
        padding: EdgeInsets.only(left: setRatio(10), right: setRatio(10)),
        child: Hero(
          tag: HeroTag.GAME_GRID_ROW,
          child: Row(
            mainAxisAlignment: (list?.length ?? 0) <= 1
                ? MainAxisAlignment.center
                : MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: createItem((list?.length ?? 0), list),
          ),
        ),
      );
    });
  }
}
